:root {
  /* 尺寸变量 */
  --size-1: 12px;
  --size-2: 16px;
  --size-3: 18px;
  --size-4: 24px;
  --size-5: 32px;
  --size-6: 48px;
}

/* theme-default 主题 */
[theme="theme-default"] {
  /* 文本颜色 */
  --text-color-default: #333333;
  /* 文本颜色-高亮 */
  --text-color-light: #666666;
  /* 灰色 */
  --text-color-muted: #999999;
  /* 暗黑色 */
  --text-color-dark: #222222;
  /* 白色 */
  --text-color-white: #ffffff;
  /* 黑色 */
  --text-color-black: #000000;
  /* 主题色 */
  --text-color-primary: #0070f3;
  /* 次题色 */
  --text-color-secondary: #f0f0f0;
  /* 成功色 */
  --text-color-success: #00d1b2;
  /* 信息色 */
  --text-color-info: #209cee;
  /* 警告色 */
  --text-color-warning: #ffdd57;
  /* 错误色 */
  --text-color-danger: #ff3860;
  /* 背景颜色 */
  --background-color-default: #fafafa;
  /* 背景颜色-高亮 */
  --background-color-light: #f5f5f5;
  /* 背景颜色-暗色 */
  --background-color-dark: #333333;
  /* 背景颜色-黑色 */
  --background-color-black: #000000;
  /* 背景颜色-白色 */
  --background-color-white: #ffffff;
  /* 边框颜色 */
  --border-color-default: #eaeaea;
  /* 边框颜色-高亮 */
  --border-color-light: #dcdcdc;
  /* 边框颜色-暗色 */
  --border-color-dark: #333333;
  /* 边框颜色-黑色 */
  --border-color-black: #000000;
  /* 边框颜色-灰色 */
  --border-color-grey: #999999;
}

/* theme-white 主题 */
[theme="theme-white"] {
  /* 文本颜色 */
  --text-color-default: #333333;
  /* 文本颜色-高亮 */
  --text-color-light: #666666;
  /* 灰色 */
  --text-color-muted: #999999;
  /* 暗黑色 */
  --text-color-dark: #222222;
  /* 白色 */
  --text-color-white: #ffffff;
  /* 黑色 */
  --text-color-black: #000000;
  /* 主题色 */
  --text-color-primary: #0070f3;
  /* 次题色 */
  --text-color-secondary: #f0f0f0;
  /* 成功色 */
  --text-color-success: #00d1b2;
  /* 信息色 */
  --text-color-info: #209cee;
  /* 警告色 */
  --text-color-warning: #ffdd57;
  /* 错误色 */
  --text-color-danger: #ff3860;
  /* 背景颜色 - 白色主题以白色和浅色为主 */
  --background-color-default: #ffffff;
  /* 背景颜色-高亮 */
  --background-color-light: #f8f8f8;
  /* 背景颜色-暗色 */
  --background-color-dark: #f0f0f0;
  /* 背景颜色-黑色 */
  --background-color-black: #000000;
  /* 背景颜色-白色 */
  --background-color-white: #ffffff;
  /* 边框颜色 - 使用较浅的边框以适应白色主题 */
  --border-color-default: #eaeaea;
  /* 边框颜色-高亮 */
  --border-color-light: #dddddd;
  /* 边框颜色-暗色 */
  --border-color-dark: #cccccc;
  /* 边框颜色-黑色 */
  --border-color-black: #000000;
  /* 边框颜色-灰色 */
  --border-color-grey: #999999;
}

/* theme-dark 主题 */
[theme="theme-dark"] {
  /* 文本颜色 - 深色主题使用较亮的文字颜色 */
  --text-color-default: #cccccc;
  /* 文本颜色-高亮 */
  --text-color-light: #999999;
  /* 灰色 */
  --text-color-muted: #666666;
  /* 暗黑色 - 在深色主题中实际上是较亮的文本 */
  --text-color-dark: #dddddd;
  /* 白色 */
  --text-color-white: #ffffff;
  /* 黑色 - 在深色主题中使用较暗的颜色 */
  --text-color-black: #000000;
  /* 主题色 */
  --text-color-primary: #3291ff;
  /* 次题色 */
  --text-color-secondary: #333333;
  /* 成功色 */
  --text-color-success: #00d1b2;
  /* 信息色 */
  --text-color-info: #209cee;
  /* 警告色 */
  --text-color-warning: #ffdd57;
  /* 错误色 */
  --text-color-danger: #ff3860;
  /* 背景颜色 - 深色主题以深色背景为主 */
  --background-color-default: #121212;
  /* 背景颜色-高亮 */
  --background-color-light: #1a1a1a;
  /* 背景颜色-暗色 */
  --background-color-dark: #0a0a0a;
  /* 背景颜色-黑色 */
  --background-color-black: #000000;
  /* 背景颜色-白色 - 在深色主题中使用较暗的"白色" */
  --background-color-white: #222222;
  /* 边框颜色 - 深色主题使用较亮的边框以增强可见性 */
  --border-color-default: #333333;
  /* 边框颜色-高亮 */
  --border-color-light: #444444;
  /* 边框颜色-暗色 */
  --border-color-dark: #222222;
  /* 边框颜色-黑色 */
  --border-color-black: #000000;
  /* 边框颜色-灰色 */
  --border-color-grey: #666666;
}
